<template>
  <el-drawer
    model-value="dialogVisible"
    :title="dialogTitle"
    width="30%"
    @close="handleClose"
  >
    <div>
      <div class="line-cls">
        <div class="title-cls">封面：</div>
        <el-image
          style="width: 100px"
          :src="pre_url + '/image/userAvatar/' + voteInfo?.coverImage"
          :zoom-rate="1.2"
          :preview-src-list="[
            pre_url + '/image/userAvatar/' + voteInfo?.coverImage,
          ]"
          hide-on-click-modal
        />
      </div>
      <div class="line-cls">
        <div class="title-cls">标题：</div>
        <div>{{ voteInfo?.title }}</div>
      </div>
      <div class="line-cls" v-if="voteInfo.explanation">
        <div class="title-cls">说明：</div>
        <div>{{ voteInfo?.explanation }}</div>
      </div>
      <div class="line-cls">
        <div class="title-cls">投票发起者：</div>
        <div>{{ voteInfo?.twxUserinfo?.nickName }}</div>
      </div>
      <div class="line-cls">
        <div class="title-cls">类型：</div>
        <div>{{ voteInfo.type == 2 ? "图片" : "文本" }}</div>
      </div>
      <div class="line-cls">
        <div class="title-cls">选项：</div>
        <div>
          <div
            v-for="(item, index) in voteInfo.items"
            :key="item.id"
            class="item-cls"
          >
            <div>{{ index + 1 }}：</div>
            <div>
              <div style="margin-bottom: 10px">{{ item.name }}</div>
              <div v-if="item.image">
                <el-image
                  style="width: 100px"
                  :src="pre_url + '/image/userAvatar/' + item.image"
                  :zoom-rate="1.2"
                  :preview-src-list="[
                    pre_url + '/image/userAvatar/' + item.image,
                  ]"
                  hide-on-click-modal
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="line-cls">
        <div class="title-cls">截止时间：</div>
        <div>{{ voteInfo.voteEndTime }}</div>
      </div>
      <div class="line-cls">
        <div class="title-cls">是否结束：</div>
        <div>
          {{
            new Date(voteInfo.voteEndTime).getTime() > new Date().getTime()
              ? "进行中"
              : "已结束"
          }}
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleClose">确认</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts">
export default {
  name: "VoteInfoQuery",
};
</script>
<script setup lang="ts">
import { defineEmits, defineProps, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { findById } from "@/api/voteInfo";

const props = defineProps({
  voteId: {
    type: Number,
    default: -1,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
});
const voteInfo:any = ref({});
const pre_url = ref(import.meta.env.VITE_APP_WEB_API);

const getVoteInfoById = async () => {
  const result = await findById(props.voteId);
  let res = result.data;
  if (res.code == 200) {
    voteInfo.value = res.data;
  }
};
watch(
  () => props.voteId,
  () => {
    if (props.voteId > 0) {
      getVoteInfoById();
    }
  }
);

/*创建一个事件名为update:modelValue的initUserList事件*/
const emits = defineEmits(["update:modelValue"]);

const handleClose = () => {
  emits("update:modelValue", false);
};
</script>

<style lang="less" scoped>
// /deep/ .el-image {
//   img {
//     width: 100px;
//     height: 50px;
//   }
// }

.line-cls {
  display: flex;
  font-size: 14px;
  padding: 5px;

  .title-cls {
    font-weight: bolder;
  }
  .item-cls {
    display: flex;
    margin-bottom: 10px;
  }
}
</style>